<!-- Basic UI for running the demo in the browser -->

<html>
  <head>
    <title>Vote under MPC</title>
    <style>
      .error {
        color: #FF0000;
      }
    </style>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <script src="/dist/jiff-client.js"></script>

    <!-- Contains UI Handlers and Input Checks -->
    <script type="text/javascript" src="./client.js"></script>

    <!-- Contains the MPC implementation -->
    <script type="text/javascript" src="./mpc.js"></script>
  </head>
  <body style="background-color: rgb(255, 226, 240);">
    <h1>Connect JIFF</h1>
    <label for="computation_id">Computation ID</label><input id="computation_id" value="test"></input><br/><br/>
    <label for="count">Party Count<label> <input id="count" pattern="[0-9]*" value="2"> &nbsp; <button id="connectButton" onclick="connect();">Connect</button>
    <br/><br/>
    <hr/>
    <h1>Vote for the best friend.</h1>
      <label>
        <input type="radio" name="animal"/>
        <figure style="text-align: center; background-color: rgb(199, 160, 214); border: 20px solid rgb(199, 160, 214)">
          <div style="text-align: center"> <img src="photos/echidna.jpg" height="150" alt="spikey boi"> </div>
          <figcaption> Spikey Boi </figcaption>
        </figure>
        </label> &nbsp;
        <span id="res0"></span><br/>
      <label>
        <input type="radio" name="animal"/>
        <figure style="text-align: center; background-color: rgb(234, 147, 181); border: 20px solid rgb(234, 147, 181)">
          <div style="text-align: center"> <img src="photos/flapjack.jpg" height="150" alt="water pancake"> </div>
          <figcaption> Water Pancake </figcaption>
        </figure>
      </label> &nbsp;
      <span id="res0"></span><br/>
      <label>
        <input type="radio" name="animal"/>
        <figure style="text-align: center; background-color: rgb(217, 234, 175); border: 20px solid rgb(217, 234, 175)">
          <div style="text-align: center"> <img src="photos/pangolin.jpeg" height="150" alt="concerned pinecone"> </div>
          <figcaption> Concerned Pinecone </figcaption>
        </figure>
      </label> &nbsp;
      <span id="res0"></span><br/>
      <label>
        <input type="radio" name="animal"/>
        <figure style="text-align: center; background-color: rgb(175, 234, 230); border: 20px solid rgb(175, 234, 230)">
          <div style="text-align: center"> <img src="photos/springbok.jpg" height="150" alt="bouncy mcfluffybum"> </div>
          <figcaption> Bouncy Mcfluffybum </figcaption>
        </figure>
      </label> &nbsp;
      <span id="res0"></span><br/>

    <button onclick="submit();" disabled="disabled" id="button">Vote</button><label><input type="checkbox" id="cheat">Cheat</label>
    <div id="output"></div>
  </body>
</html>
